<template>
  <div>
    <zcb-dialog
      v-model="visible"
      :title="coModelObj.title || t('keys.Countersign')"
      :width="450"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="tips-box" v-if="coModelObj.num !== 3">
        <h4>加签审批类型说明</h4>
        <p><strong>抢占：</strong>任意一个加签人 【批准】后则流转至当前审批节点预制审批人进行审批</p>
        <p><strong>会签：</strong>所有“加签人”均操作【批准】后则流转至当前审批节点预制审批人进行审批</p>
      </div>
      <div class="dialogAll" v-if="visible">
        <el-form ref="refForm" :model="formData" :label-width="coModelObj.labelWidth || '80px'" label-position="left">
          <el-form-item
            :label="coModelObj.labelOne"
            prop="empId"
            :rules="[{ required: true, message: `${t('keys.pleaseEnter')}${coModelObj.labelOne}`, trigger: 'blur' }]"
          >
            <!--   :teleported="false" -->
            <!-- <el-select
              v-if=""
              style="width:100%"
              v-model="formData.empId"
              :placeholder="`${t('keys.pleaseEnter')}${coModelObj.labelOne}`"
              popper-class="selectpopperChild"
              filterable
              clearable
              :teleported="true"
              reserve-keyword
              remote
              v-selectLoadMore="loadList"
              :remote-method="remoteMethod"
              @visible-change="focusEvent"
              @clear="selectClear"
            >
              <el-option :key="0" :label="0" :value="0" :disabled="true">
                <div class="seleAll">
                  <span class="seleAll_l">{{ t('keys.emp_name') }}</span> <span class="seleAll_r">{{ t('keys.email') }}</span>
                </div>
              </el-option>
              <el-option v-for="item in empList" :key="item.empId" :label="item.empName" :value="item.empId">
                <div class="seleAll">
                  <span class="seleAll_l">{{ item.empName }}</span>
                  <span class="seleAll_r">
                    {{ item.email }}
                  </span>
                </div>
              </el-option>
              <div class="loading" v-if="loading">{{ t('keys.Loading') }}...</div>
              <div class="loading" v-else>{{ t('keys.Loading_completed') }}</div>
            </el-select> -->
            <!-- ZEMD.TENANT_EMP_VIEW -->
            <lov-view
              v-model="formData.empId"
              @lovChange="lovChange"
              :lovViewConfig="{
                lovViewCode: 'ZEMD.TENANT_EMP_VIEW', // 值集视图CODE
                checkboxFlag: coModelObj.num !== 1 && coModelObj.num !== 2 ? false : true, // 是否开启多选
                keyId: 'empId', // 多选根据id选择  默认key id
                showKey: 'empName', // 显示key
                allSelectList: formData.empId, // 所有已选中 回显list
                isSearch: false // 判断是否是搜索
              }"
            />
          </el-form-item>
          <el-form-item
            :label="coModelObj.labelTwo"
            prop="description"
            :rules="[{ required: true, message: `${t('keys.pleaseEnter')}${coModelObj.labelTwo}`, trigger: 'blur' }]"
          >
            <el-input
              type="textarea"
              v-model="formData.description"
              clearable
              :placeholder="`${t('keys.pleaseEnter')}${coModelObj.labelTwo}`"
              maxlength="200"
              :autosize="{ minRows: 5, maxRows: 6 }"
              resize="none"
              show-word-limit
              @blur="
                (v) => {
                  formData.description = isTrim(v.currentTarget.value, '', 'TEXTAREA')
                }
              "
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="coModelObj?.labelThree"
            :label="coModelObj.labelThree"
            prop="approvalType"
            :rules="[{ required: true, message: `${t('keys.pleaseEnter')}${coModelObj.labelThree}`, trigger: 'blur' }]"
          >
            <!-- ZWFK.APPROVAL_TYPE -->
            <zcb-radio
              v-model="formData.approvalType"
              lovCode="ZWFK.APPROVAL_TYPE"
              :item="{ displayFormat: false }"
              @change="
                (val, valueContent) => {
                  formData.approvalType = val
                  formData.valueContent = valueContent
                }
              "
            ></zcb-radio>
          </el-form-item>
        </el-form>
      </div>
      <template #btns>
        <el-button @click="closeModel()">{{ t('keys.cancel') }}</el-button>
        <el-button type="primary" @click="submitForm">{{ t('keys.ok') }}</el-button>
      </template>
    </zcb-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, nextTick } from 'vue'
import { ERR_OK } from 'config/statusCode'
import { getEmpApi } from 'api/personalCenter'
import { useI18n } from 'vue-i18n'
const { isTrim } = window.zcbFun
const { t } = useI18n() // 中英文
const emit = defineEmits(['coModel-submit'])

const props = defineProps({
  coModelObj: {
    type: Object,
    default: {}
  }
})
// props.coModelObj = {
//   title: '',
//       labelWidth: '80px',
//       labelOne: t('keys.Countersigned_by'),
//       labelTwo: t('keys.Reason_for_endorsement')
// }
console.log(props.coModelObj, 'props.coModelObj')
const empList = ref([])
const loading = ref(false)
const searchVal = reactive({
  page: 0,
  size: 20,
  empName: ''
})
const isloading = ref(false)
const loadList = async () => {
  if (isloading.value) return
  loading.value = true
  searchVal.page++
  const { code, data } = await getEmpApi(searchVal)
  if (code === ERR_OK) {
    if (data.list.length) {
      nextTick(() => {
        empList.value = [...empList.value, ...data.list]
      })
    } else {
      isloading.value = true
    }
    loading.value = false
  }
}

const focusEvent = async (val) => {
  if (val) {
    searchVal.page = 0
    searchVal.empName = ''
    empList.value = []
    isloading.value = false
    loadList()
  }
}
const selectClear = async () => {
  searchVal.page = 0
  searchVal.empName = ''
  empList.value = []
  isloading.value = false
}
const remoteMethod = (query) => {
  searchVal.page = 0
  isloading.value = false
  if (query) {
    empList.value = []
    searchVal.empName = query
  } else {
    searchVal.empName = ''
  }
  loadList()
}

const formData = reactive({
  empId: [],
  empids: [],
  description: '', // 描述
  approvalType: '',
  valueContent: ''
})
const lovChange = (val) => {
  formData.empId = val
  if (props.coModelObj.num === 3) {
    formData.empids = [val.empId]
  } else {
    formData.empids = val
  }
}
const refForm = ref(null)
const submitForm = () => {
  refForm.value.validate((valid) => {
    if (valid) {
      emit('coModel-submit', formData)
      closeModel()
    } else {
      return false
    }
  })
}

const visible = ref(false)
const closeModel = () => {
  formData.description = ''
  formData.empId = []
  formData.empIds = []
  emit('closeModel')
  visible.value = false
}
const showModel = () => {
  visible.value = true
  searchVal.page = 0
  searchVal.empName = ''
  isloading.value = false
  empList.value = []
  loadList()
  refForm.value ? refForm.value.resetFields() : ''
}
defineExpose({ showModel })

const vSelectLoadMore = {
  mounted: (el, binding) => {
    nextTick(() => {
      // 获取element-ui定义好的scroll盒子
      // const selectDom = el.querySelector('.el-select-dropdown__wrap')
      const selectDom = document.getElementsByClassName('selectpopperChild')[1]
      const tDom = selectDom.querySelector('.el-select-dropdown__wrap')
      tDom.addEventListener(
        'scroll',
        function() {
          const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
          if (CONDITION) {
            binding.value()
          }
        },
        true
      )
    })
  }
}
</script>
<style lang="scss" scope>
.dialogAll {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.copywriting {
  width: 100%;
  line-height: 22px;
  font-size: var(--zcb-font-size-14);
  // margin: 15px 0;
  margin-top: 0;
  span {
    color: var(--el-color-primary);
  }
}
.selectpopperChild {
  min-width: 320px;
  .el-select-dropdown__list {
    margin-top: 38px !important;
  }
  .el-select-dropdown__item {
    border-bottom: 1px var(--el-border-color) var(--el-border-style);
    color: #333333;
  }
  .el-select-dropdown__item.selected {
    background: #fff4e6;
  }
  .el-select-dropdown__item.is-disabled {
    background: #f0f0f0;
    position: absolute;
    top: 0;
    right: 0px;
    width: 100%;
    z-index: 1;
  }
  .el-select-dropdown__item.is-disabled:hover {
    background: #f0f0f0;
  }
}
.seleAll {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  text-align: left;
  .seleAll_l {
    width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .seleAll_r {
    width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.loading {
  width: 100%;
  text-align: center;
  color: #606266;
  height: 34px;
  line-height: 34px;
  font-size: var(--zcb-font-size-14);
}
.tips-box {
  background: #e9f8ff;
  margin: -10px -21px 20px;
  padding: 10px 20px;
  font-size: var(--zcb-font-size);
}
</style>
